let username = getCookie('username');
if (!username) { // 未登录
    let index = layer.msg('请先登录', {
      shade: [.7, '#666']
    });
    setTimeout(() => {
      layer.close(index);
      location.href = './jing-shouye.html';
    }, 1500);
  } else {
    $(window).ready(function() {
        // console.log(getCookie(username))
            // console.log(decodeURIComponent(username)) //解决中文乱码
        $('.ne').html(`欢迎${decodeURIComponent(username)}`)
        $('.ne').css({ 'margin-right': '20px' })
        $('.na').html(`退出登入`)
            // 实现点击退出
            //  删除cookie中的键名为username的值就可以退登录
        $('.na').click(function() {
            delCookie('username');
            delCookie('rememberusername');
            location.reload();
        })
    })
}
/****************************************** */
let cartData = localStorage.getItem('data');
if (!cartData) {
    $('.mai').html(`     
    <div class="jumbotron">
    <h1>购物车空空如也</h1>
    <p>你还没有添加商品到购物车</p>
    <p><a class="btn btn-primary btn-lg" href="./jing-fenye.html" role="button">去逛逛</a></p>
  </div>`);
} else {   // 判断本地购物车中是否有用户的数据
    let cartArr = JSON.parse(cartData);
    // 取出用户在购物车中的商品id
    let goodsIds = cartArr.map(v => {
      if (v.username === username) {
        return  {id:v.goodsId,num:v.num};
      }
    })
    // 去除goodsIds中的undefined
    let gids = goodsIds.filter(v => v !== undefined);
    // 判断gids是否是空数组
    if (gids.length === 0) {
      $('.mai').html(`     
      <div class="jumbotron">
      <h1>购物车空空如也</h1>
      <p>你还没有添加商品到购物车</p>
      <p><a class="btn btn-primary btn-lg" href="./jing-fenye.html" role="button">去逛逛</a></p>
    </div>`);
    } else {
/********************************************************************* */
// 添加加载层
let index = layer.load(1, {
    shade: .7
})
getGoodsInfo()
/**************数据渲染************* */
function getGoodsInfo() {
    var aa = ' '
    gids.forEach(item => {
        // 根据商品id发起请求，获取到商品数据
        $.ajax({
            url: './php/detail.php',
            data: { id: item['id'] },
            async: false,
            dataType: 'json',
            success(res) {
                var data = res.data
                    // console.log(data.id);
                    // 获取商品图片地址
                let imgs = data.img.split('==========');
                aa += `<li class="sp-1">
                <span><input name=selectOne type="checkbox" data-id=${item.id}><img src="${imgs[0]}" alt=""></span>
                <dt>${data.text}</dt>
                <dt>￥<b class="xx">${data.price}</b> </dt>
                <dt><button class="num-">-</button>
                    <i class="num">${item.num}</i>
                    <button class="num+">+</button>
                </dt>
                <dt class="xj">￥</dt>
                <dt><button class="sc" data-id=${item.id}>删除</button></dt>
            </li>
                `
                $('.mai').html(aa);
                // 将商品的库存写入input标签的自定义属性中 data-stock
                $('.num').attr('data-stock', data.stock);
                //加入id标识
                layer.close(index); // 关闭加载层
            }
            
        });

    });
}
/****************************************************************** */
/*****************点击 + - 计算总价钱、删除******************************* */
var ee = Array.from($('.sp-1'))
ee.forEach(item => {//遍历所有的商品行
        // console.log(item)
        var dd = $(item).find(".num").text() * $(item).find(".xx").text()
        $(item).find(".xj").text('￥' + dd)
/**********************点击删除商品所在行********************* */
        $(item).find(".sc").click(function() {
            $(item).remove()
            let goodsId= $(this)[0].dataset.id
            let data = JSON.parse(localStorage.getItem('data'));
            let dataArr = data.filter(v=>{
                return !(v.username===username&&v.goodsId===goodsId)
              })
                // 写入购物车
            localStorage.setItem('data',JSON.stringify(dataArr));
            fn()
            })
/**************************删除选中商品**************************************** */
$('.del-1').click(function(){
        $('input[name=selectOne]:checked').each(function(){
            $(this).parent().parent().remove()//删除选中商品所在行
            console.log($(this)[0].dataset.id)
            // 修改本地购物车中的数据
            let goodsId = $(this)[0].dataset.id;
            let data = JSON.parse(localStorage.getItem('data'));
            let dataArr = data.filter(v=>{
          return !(v.username===username&&v.goodsId===goodsId)
        })
            // 写入localStorage
        localStorage.setItem('data',JSON.stringify(dataArr)); 
        fn()
 
          });

    return false
})   
/***************************清空所有商品*************************************** */
$('.del-2').click(function(){
        $('.sp-1').remove()  //删除所有商品行
        // 修改本地购物车中的数据
        let data = JSON.parse(localStorage.getItem('data'));
        let dataArr = data.filter(v=>{
                 return !(v.username===username)
            })
        // 写入localStorage
        localStorage.setItem('data',JSON.stringify(dataArr));   
       fn()
        return false
      });
/**********************点击叠加商品数量********************* */
        var num = $(item).find(".num").text()//获取商品数量值

        $(item).find(".num+").click(function() {
            // 获取input中的text，和库存值
            let val = $(item).find(".num").text() - 0;
            let stock = $(item).find(".num")[0].dataset.stock - 0;
            if (val == stock) { // 判断是否超出库存量
                $(item).find(".num").text(stock);
                layer.msg('超出库存');
            } else {
                $(item).find(".num").text(++num);
            }
            var dd = $(item).find(".num").text() * $(item).find(".xx").text()
            $(item).find(".xj").text('￥' + dd)
            total()
    // 修改本地购物车中的数量
      let goodsId = $(item).find(".sc")[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let cartGoods = data.find(v => v.username === username && v.goodsId === goodsId);
      cartGoods.num = num;
      // 将修改后的data写入本地购物车
      localStorage.setItem('data', JSON.stringify(data))
            return false
        })
/**********************点击减少商品数量********************* */
        $(item).find(".num-").click(function() {
            // event.stopPropagation()
            if (num > 1) {
                $(item).find(".num").text(--num)
            } else {
                $(item).find(".num").text(1)
                layer.msg('购买数最少为1');
            }
            var dd = $(item).find(".num").text() * $(item).find(".xx").text()
            $(item).find(".xj").text('￥' + dd)
            total()
      // 修改本地购物车中的数量
      let goodsId = $(item).find(".sc")[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let cartGoods = data.find(v => v.username === username && v.goodsId === goodsId);
      cartGoods.num = num;
      // 将修改后的data写入本地购物车
      localStorage.setItem('data', JSON.stringify(data))
            return false
        })

    })

/***********************全选单选******************************************* */

    // 全选点击事件
        // 全选点击事件
        $('input[name=selectAll]').click(function () {
          $('input[name=selectAll]').prop('checked', $(this).prop('checked'));
          $('input[name=selectOne]').prop('checked', $(this).prop('checked'));
          total();
        });
        // 单选事件
        $('input[name=selectOne]').click(function () {
          // 将jq集合对象转为原生的数组
          let inps = Array.prototype.slice.call($('input[name=selectOne]'));
          // 判断单选元素数组是否每一个都是选中的
          let flag = inps.every(v => $(v).prop('checked'));
          $('input[name=selectAll]').prop('checked', flag);
          total();
        })

/**************************计算商品总数和商品总价***************************** */

  function total() {
    let totalNum = 0; // 商品总数
    let totalPrice = 0; // 商品总价
    $('input[name=selectOne]').each((i, v) => {
      // 判断是否勾选上
      if ($(v).prop('checked')) {
        // 累加商品总数和总价
        totalNum += $(v).parent().parent().find('.num').text() - 0;
    //    console.log($(v).parent().parent().find('.xj').text().slice(1))
        totalPrice += $(v).parent().parent().find('.xj').text().slice(1) - 0;
      }
    });
    // 渲染总价和总数
    $('.totalNum').text(totalNum);
    $('.totalPrice').text(totalPrice);
}
/*****************************判断购物区是否为空******************************************** */
function fn() {
    let cartData = localStorage.getItem('data');
    let cartArr = JSON.parse(cartData);
    // 取出用户在购物车中的商品id
    let goodsIds = cartArr.map(v => {
      if (v.username === username) {
        return  {id:v.goodsId,num:v.num};
      }
    })
    // 去除goodsIds中的undefined
    let gids = goodsIds.filter(v => v !== undefined);
    if (gids.length === 0) {
        //加载层-风格2
        layer.load(1,{
            shade: [0.8, '#000'],
        });
        //此处演示关闭
        setTimeout(function(){
        layer.closeAll('loading');
        location.reload();
        }, 200);
        }else{
            layer.msg('已移除商品',{time:500});
        }    
}
/******************************************************************* */
    }
}
    

  